import React from 'react';
import { ImagePicker, WingBlank } from 'antd-mobile';
import 'antd-mobile/lib/image-picker/style/css';
import 'antd-mobile/lib/wing-blank/style/css';
const data = [];

class ImagePickerExample extends React.Component {
    static defaultProps = {
        handleVal: (editor)=>{},

    }
    constructor(props) {
        super(props);
        console.log(this.props.contentName.content_summary, '123321')
        var content_summary
        if (this.props.contentName.content_summary != undefined) {
            content_summary = this.props.contentName.content_summary.split(",")
            content_summary.forEach((item, index) => {
                data.push({
                    url: item,
                    id: index
                })
            })
        }

        // data.push({
        //     url: content_summary[0],
        //     id: 1
        // })
        // const { contentName } = props
    }

    state = {
        files: data,
        multiple: true,
        img: '',
        contentName: this.props.contentName
    }
    // onChange = (files, type, index) => {
    //     console.log(files, type, index);
    //     this.setState({
    //         files,
    //     });
    // }

    onChange = (files) => {
        this.setState({
            files,
        });
        const self = this;
        let maxFiles = (this.props.multiple) ? files.length : 1;
        console.log(this.props, 1111)
        // let arr = [];
        //
        // for (var i = 0; i < maxFiles; i++) {
        //     console.log(files[i], 'file[i]')
        //     files[i].preview = URL.createObjectURL(files[i]);
        //     files[i].upload = ((file)=>{
        //         return () => self.upload(file)
        //     })(files[i]);
        //
        //     arr.push(files[i]);
        // }
        //
        // this.props.onUpload(arr);
        this.upload(files)
    }

    upload(file) {
        if (!file || file.size === 0) return null;
        var contentName = ''
        console.log(file)
        for (let i = 0; i < file.length; i++) {
            console.log(file[i].file === undefined, i, 'file[i].file.name')
            let fileName = file[i].file !== undefined ? 'https://chy-ds-1253882812.cos.ap-guangzhou.myqcloud.com/' + file[i].file.name : file[i].url
            if (contentName === '') {
                contentName = fileName
            } else {
                contentName = contentName + ',' + fileName
            }
        }
        file = file[file.length - 1].file
        this.props.handleVal(contentName)
        // const key = file.preview.split('/').pop() + '.' + file.name.split('.').pop();
        return new Promise(resolve => {
            const input = document.querySelector('input[type="file"]');
            const data = new FormData();
            data.append('file', file);
            data.append('token', this.props.token);
            // data.append('key', key);
            data.append('x:filename', file.name);
            data.append('x:size', file.size);

            var COS = require('cos-js-sdk-v5');
            // 车海洋
            var cos = new COS({
                SecretId: 'AKID9RcbQ3gxIRODqLdolV3PeO7hHj18tlGZ',
                SecretKey: 'GNJ2Zu35UoxuKcl2B9vVu78FJD1d8Uec',
            });
            // // Allon
            // var cos = new COS({
            //     SecretId: 'AKIDkdP4Zte5TpJrU3mdq5FINPHycBZpi11x',
            //     SecretKey: '0rX8YBd3KTRHwTzQgrsfMvLadVCqNky7',
            // });
            // 整文件上传  Allon  2018年11月9日17:23:22
            cos.putObject({
                // Bucket: 'chyweimob-1253630189', // 桶名-APPID  必须
                Bucket: 'chy-ds-1253882812', // 桶名-APPID  必须
                Region: 'ap-guangzhou', //区域 必须
                Key: file.name, //文件名必须
                // StorageClass: 'STANDARD',
                Body: file, // 上传文件对象
                onProgress: function (progressData) {
                    console.log(JSON.stringify(progressData));//上传成功的返回值
                    resolve(file.name)//上传成功传递文件名
                }
            }, function (err, data) {
                console.log(err || data);//上传失败的返回值
                resolve(data)
            });
        });
    }

    render() {
        const { files } = this.state;
        return (
            <WingBlank>
                <ImagePicker
                    files={files}
                    onChange={this.onChange}
                    onImageClick={(index, fs) => console.log(index, fs)}
                    selectable={files.length < 7}
                    multiple={this.state.multiple}
                />
            </WingBlank>
        );
    }
}

export default ImagePickerExample
